<script setup lang="ts">
import { ASSET_DETAIL_QUERY } from '/@/api/modules/equipment/asset-manage';
import { onMounted, reactive } from 'vue';
import { getCurrentInstance, showLoading } from '@tarojs/taro';
import { ASSET_STATUS } from '/@/common/constant';
import { getSysImgUrl } from '/@/utils/index';
import dayjs from 'dayjs';

const state = reactive<{
  /**
   * 资产信息
   */
  assetInfo: AssetInfo.Dto;
}>({
  assetInfo: {},
});

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
};

/**
 * 资产详情
 */
function assetDetailQuery() {
  showLoading();
  ASSET_DETAIL_QUERY({ ids: [params.id] }).then((res) => {
    state.assetInfo = res.assetInfo || {};
  });
}
onMounted(() => {
  assetDetailQuery();
});
</script>
<template>
  <view class="device-detail__wrapper">
    <view class="device-detail-img-container" v-if="state.assetInfo.picUrl">
      <image class="device-detail-img-container__img" :src="getSysImgUrl(state.assetInfo.picUrl)" />
    </view>
    <nut-cell-group>
      <nut-cell title="资产编号" :desc="state.assetInfo.assetCode || '_'" />
      <nut-cell title="资产名称" :desc="state.assetInfo.assetName || '_'" />
      <nut-cell title="资产分类" :desc="state.assetInfo.assetTypeName || '_'" />
      <nut-cell title="品牌" :desc="state.assetInfo.brandName || '_'" />
      <nut-cell title="型号" :desc="state.assetInfo.modelName || '_'" />
      <nut-cell title="序列号" :desc="state.assetInfo.serialNo || '_'" />
      <nut-cell title="单价（元）" :desc="state.assetInfo.price?.toString() || '_'" />
      <nut-cell
        title="购置日期"
        :desc="
          state.assetInfo.purchaseDate
            ? dayjs(Number(state.assetInfo.purchaseDate)).format('YYYY-MM-DD')
            : '_'
        "
      />
      <nut-cell title="资产年限" :desc="state.assetInfo.depreciationRemain?.toString() || '-'" />
      <nut-cell
        title="资产状态"
        :desc="state.assetInfo.status ? ASSET_STATUS[state.assetInfo.status] : '_'"
      />
      <nut-cell title="所属区域" :desc="state.assetInfo.areaName || '_'" />
      <nut-cell title="所属组织" :desc="state.assetInfo.organizationName || '_'" />
      <nut-cell title="所属供应商" :desc="state.assetInfo.supplierName || '_'" />
      <nut-cell title="联系电话" :desc="state.assetInfo.concatPhone || '_'" />
    </nut-cell-group>
  </view>
</template>
<style lang="scss">
.device-detail {
  &__wrapper {
    margin: 20px 20px 80px;
    background-color: #fff;
    border-radius: 16px;
  }
  .device-detail-img-container {
    display: flex;
    justify-content: center;
    padding-top: 40px;
    &__img {
      display: inline-block;
      width: 446px;
      height: 292px;
      background: #ccc;
    }
  }
}
</style>
